<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap/css/bootstrap.css">

</head>
<body>
<!--如果利用button做出好的button背景 glyphicon-->
<button class="btn btn-primary" type="button" >
    <span class="glyphicon glyphicon-menu-down"></span>
</button>
<!--向下的下拉菜单 包裹在drowdown-->
   <div class="dropdown hidden-xs">
       <!--必须的由data-toggle属性-->
       <button class="btn btn-primary" data-toggle="dropdown">
           dropdown
           <span class="caret"></span>
       </button>
       <ul class="dropdown-menu">
           <li><a href="http://www.baidu.com">baidu</a></li>
           <li><a href="http://www.baidu.com">baidu</a></li>
           <li><a href="http://www.baidu.com">baidu</a></li>
           <li><a href="http://www.baidu.com">baidu</a></li>
           <li><a href="http://www.baidu.com">baidu</a></li>
       </ul>
   </div>

<!--为了让一些残疾人能够更好的使用这个，所以添加了一些辅助类。-->
<div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <!--span是行内元素-->
        <span class="caret"></span>
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li><a href="#">Separated link</a></li>
    </ul>
</div>

<!--图片如果响应式的话，用responsive。center-block是居中。不能用text-center-->
<div >
    <img src="../img/github.png" alt="github" class="img-responsive img-circle center-block">
</div>

<!--警告框 role最好也要写上 role=alert-->
<div class="alert alert-danger" role="alert">
   <span class="glyphicon glyphicon-exclamation-sign"></span>
    <abbr title="不好玩">buhaowan</abbr>
</div>

<!--左右对齐-->
<div class="dropdown">
    <button type="button" class="btn btn-primary btn-block" data-toggle="dropdown">
        left
        <span class="glyphicon glyphicon-circle-arrow-left"></span>
    </button>
<!--在这里里面需要加 dropdown-menu-right  在这里需要加dropdown-menu 是因为menu这个类只是基类-->
    <ul class=" dropdown-menu dropdown-menu-right">
        <li class="dropdown-header "><h1>123</h1></li>
        <li><a href="http://www.baidu.com">123</a></li>
        <li><a href="http://www.baidu.com">123</a></li>
        <li><a href="http://www.baidu.com">123</a></li>
        <li role="separator" class="divider"></li>
        <li class="dropdown-header">456</li>
        <li class="disabled"><a href="http://www.baidu.com">456</a></li>
        <li><a href="http://www.baidu.com">456</a></li>
        <li><a href="http://www.baidu.com">46</a></li>
    </ul>
x
</div>


<script type="application/javascript" src="bootstrap/jquery-3.1.0.min.js"></script>
<script type="application/javascript" src="bootstrap/js/bootstrap.js"></script>
</body>
</html>